<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{css/jquery.mobile-1.4.5.min.css}">
    <link rel="stylesheet" th:href="@{css/chat.css}">
    <script th:src="@{js/jquery.js}"></script>
    <script th:src="@{js/jquery.mobile-1.4.5.min.js}"></script>
    <script th:src="@{js/chat.js}"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <img th:src="@{images/logo.png}" alt="" class="logo">
        <h1 class="txt">姓名</h1>
        <p class="net">手机在线-4G</p>
    </div>

    <div data-role="main" class="ui-content">
        <div class="message">
            <div class="me"><p class="myMes mes">你好！</p><div class="myHead head"></div></div>
            <div class="friend"><div class="friHead head"></div><p class="friMes mes">你也好！</p></div>
        </div>

        <div class="inMes"><input id="text" type="text" class="writeMes"></div>
        <button class="sendMes ui-btn ui-icon-heart ui-btn-icon-left" onclick="send()">发送</button>

    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" >
            <ul>
                <li><a th:href="@{#}" data-icon="comment" class="autoCli" data-ajax=false>消息</a></li>
                <li><a th:href="@{/contract}" data-icon="user" data-ajax=false>联系人</a></li>
                <li><a th:href="@{account/info.html}" data-icon="info" data-ajax=false>个人信息</a></li>
            </ul>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var webSocket;
    var commWebSocket;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8080/websocket/" + document.getElementById('username').value);

        //连通之后的回调事件
        webSocket.onopen = function () {
            //webSocket.send( document.getElementById('username').value+"已经上线了");
            console.log("已经连通了websocket");
            setMessageInnerHTML("已经连通了websocket");
        };

        //接收后台服务端的消息
        webSocket.onmessage = function (evt) {
            var received_msg = evt.data;
            console.log("数据已接收:" + received_msg);
            var obj = JSON.parse(received_msg);
            console.log("可以解析成json:" + obj.messageType);
            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
            if (obj.messageType == 1) {
                //把名称放入到selection当中供选择
                var onlineName = obj.username;
                var option = "<option>" + onlineName + "</option>";
                $("#onLineUser").append(option);
                setMessageInnerHTML(onlineName + "上线了");
            } else if (obj.messageType == 2) {
                $("#onLineUser").empty();
                var onlineName = obj.onlineUsers;
                var offlineName = obj.username;
                var option = "<option>" + "--所有--" + "</option>";
                for (var i = 0; i < onlineName.length; i++) {
                    if (!(onlineName[i] == document.getElementById('username').value)) {
                        option += "<option>" + onlineName[i] + "</option>"
                    }
                }
                $("#onLineUser").append(option);

                setMessageInnerHTML(offlineName + "下线了");
            } else if (obj.messageType == 3) {
                var onlineName = obj.onlineUsers;
                var option = null;
                for (var i = 0; i < onlineName.length; i++) {
                    if (!(onlineName[i] == document.getElementById('username').value)) {
                        option += "<option>" + onlineName[i] + "</option>"
                    }
                }
                $("#onLineUser").append(option);
                console.log("获取了在线的名单" + onlineName.toString());
            } else {
                setMessageInnerHTML(obj.fromusername + "对" + obj.tousername + "说：" + obj.textMessage);
            }
        };

        //连接关闭的回调事件
        webSocket.onclose = function () {
            console.log("连接已关闭...");
            setMessageInnerHTML("连接已经关闭....");
        };
    } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function closeWebSocket() {
        //直接关闭websocket的连接
        webSocket.close();
    }

    function send() {
        var selectText = $("#onLineUser").find("option:selected").text();
        if (selectText == "--所有--") {
            selectText = "All";
        } else {
            setMessageInnerHTML(document.getElementById('username').value + "对" + selectText + "说：" + $("#text").val());
        }
        var message = {
            "message": document.getElementById('text').value,
            "username": document.getElementById('username').value,
            "to": selectText
        };
        webSocket.send(JSON.stringify(message));
        $("#text").val("");

    }
</script>

</html>